<template>
  <section>
    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form inline>
                <el-form-item label="关键字:">
                  <el-input
                    v-model="searchDto.keywords"
                    placeholder="请输入用户名或手机号"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="search(1)"
                    icon="el-icon-search"
                  >查询
                  </el-button>
                  <el-button
                    type="primary"
                    @click="search(2)"
                    icon="el-icon-s-open"
                  >重置
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    @click="newRoleUser()"
                  >新增
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="back()"
                  >返回
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <el-row :span="24">
              <page-table
                ref="table"
                :page-data="roleUserList"
                :loading="loading"
                :do-get-page-data="roleUsers"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="120"
                  header-align="center"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="用户名称"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="username"
                  label="用户名"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  label="管理"
                  width="300"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-tooltip content="删除" placement="top">
                      <el-popconfirm
                        title="确定删除吗？"
                        @confirm="deleteUser(scope.row)"
                      >
                        <el-button
                          slot="reference"
                          size="mini"
                          icon="el-icon-delete"
                        >
                        </el-button>
                      </el-popconfirm>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </page-table>
            </el-row>
            <el-dialog
              :visible.sync="showRoleUser"
              title="新增用户列表:"
              width="60%"
              class="userList"
              @close="close"
            >
              <el-form inline>
                <el-form-item label="关键字:">
                  <el-input
                    v-model="searchDto1.keywords"
                    placeholder="请输入用户名或手机号"
                    class="mr10"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="searchData(1)"
                  >查询
                  </el-button>
                  <el-button
                    type="primary"
                    @click="searchData(2)"
                    icon="el-icon-s-open"
                  >重置
                  </el-button>
                  <el-button
                    icon="el-icon-folder-add
"
                    type="primary"
                    @click="addNewRoleUser()"
                  >添加
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="back1()"
                  >返回
                  </el-button>
                </el-form-item>
              </el-form>
              <el-row style="text-align: center">
                <el-col :span="24">
                  <page-table
                    ref="multipleSelection"
                    :page-data="userNotList"
                    :loading="loading"
                    row-key="userId"
                    :do-get-page-data="getNotRoleUserList"
                    :select-change="handleSelectionChangePeople"
                  >
                    <el-table-column
                      reserve-selection
                      type="selection"
                      width="55"
                    ></el-table-column>
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="50"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="name"
                      label="用户名称"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column
                      prop="username"
                      label="用户名"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>
                  </page-table>
                </el-col>
              </el-row>
            </el-dialog>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script>
  import {mapGetters} from "vuex";
  import Status from "@/libs/status";
  import SelectTree from "@/components/select-tree";

  export default {
    name: "disUser",
    created() {
      this.roleUsers();
    },
    mounted() {
    },
    data() {
      return {
        loading: false,
        userNotList: {}, //没有当前角色的用户`
        showRoleUser: false,
        searchDto: {
          roleId: "",
          type: 0,
          pageIndex: 1,
          pageSize: 10,
          keywords: ""
        },
        searchDto1: {
          roleId: "",
          type: 1,
          pageIndex: 1,
          pageSize: 10,
          keywords: ""
        },
        multipleSelection: [],
      };
    },
    computed: {
      ...mapGetters({
        roleUserList: "roleUserList" //有当前角色的用户
      })
    },
    methods: {

      search(type = 1) {
        type === 2 && (this.searchDto.keywords = "");
        this.roleUsers(1)
      },
      searchData(type = 1) {
        if (type === 2) {
          this.searchDto1.keywords = ""
          this.multipleSelection = [];
          this.$refs.multipleSelection.clearOption();
        }
        this.getNotRoleUserList(1)
      },

      //获取角色下用户
      getNotRoleUserList(val) {
        this.loading = true;
        let tem = Object.assign(this.searchDto1, val);
        tem.roleId = this.$route.query.roleId;
        this.API.getRoleUserList(tem).then(ret => {
          this.userNotList = ret.data;
          this.loading = false;
        });
      },
      //获取角色下用户
      roleUsers(val) {
        this.loading = true;
        let tem = Object.assign(this.searchDto, val);
        tem.roleId = this.$route.query.roleId;
        this.$store.dispatch("roleUserListUsingPOSTS", tem).then(ret => {
          this.loading = false;
        });
      },

      //弹窗关闭
      close() {
        this.searchDto1.keywords = '';
        this.multipleSelection = [];
        this.$refs.multipleSelection.clearOption();
      },

      //新增用户列表
      newRoleUser() {
        this.getNotRoleUserList();
        this.showRoleUser = true;
      },

      //获取多选用户id
      handleSelectionChangePeople(val) {
        this.multipleSelection = [];
        for (let i = 0; i < val.length; i++) {
          if (this.multipleSelection.indexOf(val[i].user_id) === -1) {
            this.multipleSelection.push(val[i].userId);
          }
        }
      },

      //添加新用户列表
      addNewRoleUser() {
        if (this.multipleSelection.length === 0) {
          this.$message.error('请至少选择一个用户')
          return;
        }
        let tem = {
          body: {
            roleId: this.$route.query.roleId,
            userIds: this.multipleSelection
          }
        };
        this.$store.dispatch("addOrUpdateRoleUserS", tem).then(ret => {
          this.$message.success('添加成功')
          this.close()
          this.roleUsers();
          this.showRoleUser = false;
        });
      },
      // 删除用户
      deleteUser(row) {
        const tem = {
          roleId: this.$route.query.roleId,
          userId: row.userId
        };
        this.API.deleteRoleUserByUserId(tem).then(ret => {
          this.$message.success('删除成功')
          this.search()
        });
      },
      back() {
        this.$router.go(-1);
      },
      back1() {
        this.showRoleUser = false;
      },
    },
    components: {}
  };
</script>
<style scoped>
  .userList .el-dialog__body {
    padding-top: 0px;
  }

  .labName > :first-child {
    font-size: 16px;
  }
</style>
